<template>
	<view class="content">
		<view class="listItem">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<text style="font-size: 30upx;color: #656565;">用户名：</text>
				<text style="font-size: 30upx;color: #656565;">{{userInfo.nickName}}</text>
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;">钱包类型：</text>
				<view style="width: 30%;">
					<xfl-select
						:list="list"
						:clearable="false"
						:showItemNum="3" 
						:listShow="false"
						:isCanInput="false"  
						:style_Container="'height: 2em; font-size: 16px;'"
						:placeholder = "'请选择'"
						:selectHideType="'hideAll'"
						:initValue="'USDT'"
						 @change="change"
					>
					</xfl-select>
				</view>
				
			</view>
		</view>
		
		<view class="listItem" style="margin-top: 40upx;">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<text style="font-size: 30upx;color: #656565;">可用余额</text>
				<text style="font-size: 30upx;color: #656565;">￥{{item.total}}</text>
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;">输出数量</text>
				<yp-number-box :min="0" :max="item.total" :value="buyNum"  @change="numberChange" :index="111" />
			</view>
		</view>
	
		<view class="listItem" style="margin-top: 40upx;">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<text style="font-size: 30upx;color: #656565;font-weight: 500;">转账到：</text>
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;">会员ID</text>
				<input :name="input" :placeholder="'请输入会员ID'" @blur="activeFc" :value="toUserUid"></input>
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;">会员名称</text>
				<text style="font-size: 30upx;color: #656565;">{{item.toUserName}}</text>
			</view>
		</view>
		
		<button type="primary" @tap="zhuanzhang">我要转账</button>
		<ssPaymentPassword ref="paymentPassword" :mode="mode" @submit="submitHandle" /> 
	</view>
</template>

<script>
	
	import {
		geJyTransferInfo,
		postJyTransfer
	} from '@/services/user.service.js'
	import ypNumberBox from "@/components/yp-number-box/yp-number-box.vue"
	import xflSelect from '@/components/xfl-select/xfl-select.vue'; 
	import ssPaymentPassword from '@/components/sanshui-payment-password'
	import {
	    mapState 
	} from 'vuex'; 
	export default {
		components: { xflSelect,ypNumberBox,ssPaymentPassword },  //注册为子组件
	    data() {
	        return {
	            list: [ 
	                'USDT',
	                'FIL'
	            ],
				huiyuanid:'',
				targetType:'usdt',
				item:{},
				token:'',
				toUserUid:'',
				toUserName:'',
				buyNum:0,
				mode: 0,
	        }
	    },
		onLoad(){
			
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onShow(){
			this.checkToken();
		},
	    
		methods:{
			checkToken(){
				var that=this;
				 uni.getStorage({
				    key: 'token',
				    success: function (res) {
						that.token=res.data;
						that.getTransfer(res.data);
				    },
					fail:function(error){
						uni.navigateTo({
							url: `/pages/login/login`
						})
					}});
			},
			//获取转帐金额
			async getTransfer(token){
				var that=this;
				var param={};
				param.targetType=that.targetType;
				if(that.buyNum>0)
					param.num=that.buyNum;
					
				if(that.toUserUid!='')
					param.toUserUid=that.toUserUid;
				const {data} = await geJyTransferInfo(param);
				that.item = data;
				
				
			},
			numberChange(data){
				var that=this;
				that.buyNum = data[1];
				that.getTransfer(that.token);
			},
			change(data){
				var that=this;
				that.buyNum=0;
				that.toUserUid='';
				that.targetType = data.newVal;
				that.getTransfer(that.token);
			},
			activeFc(event){
				
				var that=this;
				that.toUserUid=event.target.value;
				that.getTransfer(that.token);
			},
			zhuanzhang:function(){
				var that = this;
				that.$refs.paymentPassword.modalFun('show');
			},
			async submitHandle(e){
				var that =this;
				//console.log(e)
				//支付接口 /api/v1/cp/kj/order
				
				var check=e.check;
				var password=e.value;
				
					that.$set(that.item,'password',password);
					that.$set(that.item,'targetType',that.targetType);
					const {msg} = await postJyTransfer(that.item);
					uni.showToast({
						title: msg,
						duration: 2000
					});
					that.getTransfer(that.token);
					
				
			},
		}
	
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F2F2F2;
		bottom: 0;
		position: fixed;
		width: 100%;
		height: 100%;
	}
	
	.listItem {
		display: flex;
		flex-direction: column;
		margin-top: 40upx;
		width: 82%;
		margin-left: 4%;
		margin-right: 4%;
		border-radius: 10upx;
		background-color: #FFFFFF;
		padding: 5%;
		
		.itemTitle {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
		}
	}
	button[type="primary"]{
		background-color: #F5CB5B;
		border-radius: 0;
		font-size: 34upx;
		margin-top: 60upx;
		width: 85%;
		border-radius: 20upx;
	}
	
</style>
